document.addEventListener('DOMContentLoaded', function () {
    // 获取按天统计的用户行为数据
    fetch('/generate_daily_behavior')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 创建中文标签映射
                const behaviorLabels = {
                    'buy': '购买',
                    'cart': '加入购物车',
                    'fav': '收藏',
                    'pv': '点击'
                };

                // 更新数据集标签为中文
                data.datasets.forEach(dataset => {
                    dataset.label = behaviorLabels[dataset.label] || dataset.label;
                });

                // 创建折线图
                const ctx = document.getElementById('dailyBehaviorChart').getContext('2d');
                const myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: data.datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: '日期'
                                },
                                grid: {
                                    display: true
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: '行为次数'
                                },
                                beginAtZero: true,
                                grid: {
                                    display: true
                                }
                            }
                        },
                        plugins: {
                            title: {
                                display: true,
                                text: '每日用户行为统计'
                            },
                            tooltip: {
                                enabled: true,
                                mode: 'index',
                                intersect: false
                            },
                            legend: {
                                position: 'top'
                            }
                        }
                    }
                });
            }
        });
});

// 查看行为分布图表 - 不使用插件，在扇形区域显示数据
document.addEventListener('DOMContentLoaded', function () {
    console.log('页面加载中，正在获取数据...');
    fetch('/generate_behavior_distribution')
        .then(response => response.json())
        .then(data => {
            console.log('收到数据:', data);
            if (data.success) {
                var ctx = document.getElementById('behaviorPieChart').getContext('2d');
                console.log('正在渲染图表...');

                // 创建饼图实例
                var behaviorPieChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.data,
                            backgroundColor: data.colors || [
                                'rgba(255, 99, 132, 0.8)',
                                'rgba(54, 162, 235, 0.8)',
                                'rgba(75, 192, 192, 0.8)',
                                'rgba(153, 102, 255, 0.8)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                         maintainAspectRatio: false, // 添加这一行
                        plugins: {
                            title: {
                                display: true,
                                text: '用户行为类型分布',
                                font: {
                                    size: 16
                                }
                            },
                            legend: {
                                position: 'bottom',
                                labels: {
                                    font: {
                                        size: 12
                                    }
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return context.label + ': ' + context.raw.toLocaleString();
                                    }
                                }
                            }
                        },
                        // 添加动画完成后的回调函数来绘制数据标签
                        animation: {
                            onComplete: function() {
                                drawPieDataLabels(this);
                            }
                        }
                    }
                });

                // 自定义函数：在饼图各区域绘制数据标签
                function drawPieDataLabels(chart) {
                    const ctx = chart.ctx;
                    const chartArea = chart.chartArea;
                    const centerX = (chartArea.left + chartArea.right) / 2;
                    const centerY = (chartArea.top + chartArea.bottom) / 2;
                    const radius = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top) / 2 * 0.7;

                    // 保存上下文状态
                    ctx.save();

                    // 设置文本样式
                    ctx.font = 'bold 5px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    // 获取数据总和
                    const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);

                    // 遍历每个数据点
                    chart.data.datasets[0].data.forEach((value, i) => {
                        // 跳过值为0的数据点
                        if (value === 0) return;

                        // 计算扇形中心角度
                        const startAngle = chart.getDatasetMeta(0).data[i].startAngle;
                        const endAngle = chart.getDatasetMeta(0).data[i].endAngle;
                        const angle = startAngle + (endAngle - startAngle) / 2;

                        // 计算标签位置（在扇形内部）
                        const labelRadius = radius * 0.6;  // 放在扇形内部
                        const x = centerX + Math.cos(angle) * labelRadius;
                        const y = centerY + Math.sin(angle) * labelRadius;

                        // 根据背景色自动选择文字颜色
                        const bgColor = chart.data.datasets[0].backgroundColor[i];
                        ctx.fillStyle = getContrastColor(bgColor);

                        // 绘制数据文本（原始数值）
                        ctx.fillText(value.toLocaleString(), x, y);

                        // 在下方绘制百分比（可选）
                        ctx.font = '10px Arial';
                        const percentage = ((value / total) * 100).toFixed(1);
                        ctx.fillText(percentage + '%', x, y + 15);
                        ctx.font = 'bold 5px Arial'; // 恢复字体大小
                    });

                    // 恢复上下文状态
                    ctx.restore();
                }

                // 辅助函数：根据背景色返回对比色（黑或白）
                function getContrastColor(bgColor) {
                    // 处理rgba颜色
                    let r, g, b;
                    if (bgColor.startsWith('rgba')) {
                        const parts = bgColor.replace(/[rgba()\s]/g, '').split(',');
                        r = parseInt(parts[0]);
                        g = parseInt(parts[1]);
                        b = parseInt(parts[2]);
                    } else {
                        // 处理hex颜色（简化的处理）
                        const hex = bgColor.replace('#', '');
                        r = parseInt(hex.substr(0, 2), 16);
                        g = parseInt(hex.substr(2, 2), 16);
                        b = parseInt(hex.substr(4, 2), 16);
                    }

                    // 计算亮度值
                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
                    return brightness > 128 ? '#333' : '#fff';
                }
            }
        });
});

// 按小时统计用户行为
document.addEventListener('DOMContentLoaded', function () {
    console.log('页面加载中，正在获取每小时行为数据...');
    fetch('/generate_hourly_behavior')
        .then(response => response.json())
        .then(data => {
            console.log('收到每小时行为数据:', data);
            if (data.success) {
                // 创建中文标签映射
                const behaviorLabels = {
                    'buy': '购买',
                    'cart': '加入购物车',
                    'fav': '收藏',
                    'pv': '点击'
                };

                // 更新数据集标签为中文
                data.datasets.forEach(dataset => {
                    dataset.label = behaviorLabels[dataset.label] || dataset.label;
                });

                var ctx = document.getElementById('hourlyBehaviorChart').getContext('2d');
                console.log('正在渲染每小时行为图表...');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: data.datasets
                    },
                    options: {
                        maintainAspectRatio: false, // 添加这一行
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: '每小时用户行为统计'
                            },
                            legend: {
                                position: 'bottom'
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: '时间(小时)'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: '行为次数'
                                },
                                beginAtZero: true
                            }
                        }
                    }
                });
            } else {
                console.error('获取每小时行为数据失败:', data.message);
            }
        })
        .catch(error => {
            console.error('获取每小时行为数据时出错:', error);
        });
});


// 获取点击量Top10商品数据
fetch('/generate_top10_items_pv')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const ctx = document.getElementById('top10ItemsPvChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: '点击量',
                        data: data.pv_counts,
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                        yAxisID: 'y'
                    }, {
                        label: `点击率(${data.rate_unit || '%'})`,
                        data: data.pv_rates,
                        backgroundColor: 'rgba(220, 60, 20, 0.8)',
                        borderColor: 'rgba(220, 60, 20, 1)',
                        borderWidth: 1,
                        type: 'line',
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: '点击量Top10商品'
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.datasetIndex === 0) {
                                        label += context.raw.toLocaleString() + '次';
                                    } else {
                                        // 显示万分比但保留4位小数
                                        label += (context.raw / 100).toFixed(4) + '%';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '点击量(次)'
                            },
                            beginAtZero: true
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: `点击率(${data.rate_unit || '%'})`
                            },
                            beginAtZero: true,
                            min: 0,
                            max: 5,  // 设置最大值为5‱ (即0.05%)
                            ticks: {
                                callback: function (value) {
                                    return (value / 100).toFixed(2) + '%'; // 显示为百分比格式
                                }
                            },
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        }
    });

// 获取购买量Top10商品数据
fetch('/generate_top10_items_buy')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const ctx = document.getElementById('top10ItemsBuyChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: '购买量',
                        data: data.buy_counts,
                        backgroundColor: 'rgba(255, 99, 132, 0.8)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }, {
                        label: '购买转化率(%)',
                        data: data.buy_rates,
                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1,
                        type: 'line',
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: '购买量Top10商品'
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.datasetIndex === 0) {
                                        label += context.raw.toLocaleString();
                                    } else {
                                        label += context.raw.toFixed(2) + '%';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '购买量'
                            },
                            beginAtZero: true
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '购买转化率(%)'
                            },
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        }
    });

// 获取购买量Top10商品类别数据
fetch('/generate_top10_categories_buy')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const ctx = document.getElementById('top10CategoriesBuyChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: '购买量',
                        data: data.buy_counts,
                        backgroundColor: 'rgba(153, 102, 255, 0.8)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 1
                    }, {
                        label: '购买转化率(%)',
                        data: data.buy_rates,
                        backgroundColor: 'rgba(255, 159, 64, 0.8)',
                        borderColor: 'rgba(255, 159, 64, 1)',
                        borderWidth: 1,
                        type: 'line',
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: '购买量Top10商品类别'
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.datasetIndex === 0) {
                                        label += context.raw.toLocaleString();
                                    } else {
                                        label += context.raw.toFixed(2) + '%';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '购买量'
                            },
                            beginAtZero: true
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '购买转化率(%)'
                            },
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        }
    });

// 渲染转化率图表
document.addEventListener('DOMContentLoaded', function () {
    // 获取转化率数据
    fetch('/generate_conversion_rates')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 1. 点击→加购→购买 转化率图表
                const pvCartBuyCtx = document.getElementById('pvCartBuyChart').getContext('2d');
                const pvCartBuyChart = new Chart(pvCartBuyCtx, {
                    type: 'bar',
                    data: {
                        labels: ['点击→加购', '加购→购买', '整体转化率'],
                        datasets: [{
                            label: '转化率(%)',
                            data: [
                                data.stage_rates[0],  // pv_to_cart
                                data.stage_rates[2],  // cart_to_buy
                                data.rates[0]        // pv_cart_buy
                            ],
                            backgroundColor: [
                                'rgba(54, 162, 235, 0.8)',  // 蓝色
                                'rgba(255, 99, 132, 0.8)',  // 红色
                                'rgba(75, 192, 192, 0.8)'   // 绿色
                            ],
                            borderColor: [
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 99, 132, 1)',
                                'rgba(75, 192, 192, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: '点击→加购→购买转化路径',
                                font: {
                                    size: 16
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function (context) {
                                        return context.raw.toFixed(2) + '%';
                                    }
                                }
                            },
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: '转化率(%)'
                                },
                                max: 100
                            }
                        },
                        // 添加动画完成后的回调函数来绘制数据标签
                        animation: {
                            onComplete: function () {
                                drawBarValues(this);
                            }
                        }
                    }
                });

                // 2. 点击→收藏→购买 转化率图表
                const pvFavBuyCtx = document.getElementById('pvFavBuyChart').getContext('2d');
                const pvFavBuyChart = new Chart(pvFavBuyCtx, {
                    type: 'bar',
                    data: {
                        labels: ['点击→收藏', '收藏→购买', '整体转化率'],
                        datasets: [{
                            label: '转化率(%)',
                            data: [
                                data.stage_rates[1],  // pv_to_fav
                                data.stage_rates[3],  // fav_to_buy
                                data.rates[1]        // pv_fav_buy
                            ],
                            backgroundColor: [
                                'rgba(255, 206, 86, 0.8)',  // 黄色
                                'rgba(255, 99, 132, 0.8)',  // 红色
                                'rgba(75, 192, 192, 0.8)'   // 绿色
                            ],
                            borderColor: [
                                'rgba(255, 206, 86, 1)',
                                'rgba(255, 99, 132, 1)',
                                'rgba(75, 192, 192, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: '点击→收藏→购买转化路径',
                                font: {
                                    size: 16
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function (context) {
                                        return context.raw.toFixed(2) + '%';
                                    }
                                }
                            },
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: '转化率(%)'
                                },
                                max: 100
                            }
                        },
                        // 添加动画完成后的回调函数来绘制数据标签
                        animation: {
                            onComplete: function () {
                                drawBarValues(this);
                            }
                        }
                    }
                });

                // 自定义函数：在条形图上绘制数值
                function drawBarValues(chart) {
                    const ctx = chart.ctx;
                    const fontSize = 12;
                    const fontStyle = 'bold';
                    const fontFamily = 'Arial';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    chart.data.datasets.forEach(function (dataset, i) {
                        const meta = chart.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            const data = dataset.data[index];
                            const xPos = bar.x;
                            const yPos = bar.y - 5; // 在柱形顶部上方5像素处显示

                            // 根据柱形颜色自动选择文字颜色
                            const bgColor = dataset.backgroundColor[index];
                            ctx.fillStyle = getContrastYIQ(bgColor);

                            // 绘制数值文本
                            ctx.fillText(data.toFixed(2) + '%', xPos, yPos);
                        });
                    });
                }

                // 辅助函数：根据背景色返回对比色（黑或白）
                function getContrastYIQ(bgColor) {
                    // 处理rgba颜色
                    let r, g, b;
                    if (bgColor.startsWith('rgba')) {
                        const parts = bgColor.replace(/[rgba()\s]/g, '').split(',');
                        r = parseInt(parts[0]);
                        g = parseInt(parts[1]);
                        b = parseInt(parts[2]);
                    } else {
                        // 处理hex颜色（简化的处理，实际可能需要更复杂的解析）
                        const hex = bgColor.replace('#', '');
                        r = parseInt(hex.substr(0, 2), 16);
                        g = parseInt(hex.substr(2, 2), 16);
                        b = parseInt(hex.substr(4, 2), 16);
                    }

                    // 计算YIQ亮度值
                    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
                    return (yiq >= 128) ? '#333' : '#fff';
                }

                // 3. 加购→购买 转化率图表 - 在扇形内部显示百分比
                const cartBuyCtx = document.getElementById('cartBuyChart').getContext('2d');
                const cartBuyChart = new Chart(cartBuyCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['加购未购买', '加购后购买'],
                        datasets: [{
                            data: [
                                100 - data.stage_rates[2],  // 未购买比例
                                data.stage_rates[2]         // 购买比例
                            ],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.8)',  // 红色
                                'rgba(75, 192, 192, 0.8)'   // 绿色
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(75, 192, 192, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        cutout: '50%',  // 使环形图中间有更多空间
                        plugins: {
                            title: {
                                display: true,
                                text: '加购→购买转化路径',
                                font: {
                                    size: 16
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function (context) {
                                        return context.label + ': ' + context.raw.toFixed(2) + '%';
                                    }
                                }
                            },
                            legend: {
                                position: 'bottom',
                                labels: {
                                    font: {
                                        size: 12
                                    },
                                    padding: 20
                                }
                            }
                        },
                        // 关闭默认的动画，避免绘制干扰
                        animation: {
                            onComplete: function () {
                                drawInnerPercentageLabels(this);
                            }
                        }
                    }
                });

                // 自定义在扇形内部绘制百分比标签
                function drawInnerPercentageLabels(chart) {
                    const ctx = chart.ctx;
                    const chartArea = chart.chartArea;
                    const centerX = (chartArea.left + chartArea.right) / 2;
                    const centerY = (chartArea.top + chartArea.bottom) / 2;
                    const radius = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top) / 2 * 0.6;

                    // 保存上下文状态
                    ctx.save();

                    // 设置文本样式
                    ctx.font = 'bold 12px Arial';
                    ctx.fillStyle = '#333';  // 白色文字，确保在深色背景上可见
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    // 获取数据总和
                    const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);

                    // 遍历每个数据点
                    chart.data.datasets[0].data.forEach((value, i) => {
                        // 计算百分比（保留2位小数）
                        const percentage = ((value / total) * 100).toFixed(2);
                        if (percentage === '0.00') return;

                        // 计算扇形中心角度
                        const startAngle = chart.getDatasetMeta(0).data[i].startAngle;
                        const endAngle = chart.getDatasetMeta(0).data[i].endAngle;
                        const angle = startAngle + (endAngle - startAngle) / 2;

                        // 计算标签位置（在扇形内部）
                        const labelRadius = radius * 0.5;  // 放在扇形内部
                        const x = centerX + Math.cos(angle) * labelRadius;
                        const y = centerY + Math.sin(angle) * labelRadius;

                        // 绘制百分比文本
                        ctx.fillText(percentage + '%', x, y);
                    });

                    // 恢复上下文状态
                    ctx.restore();
                }
            }
        });
});


